<template>
  <el-container>
    <!-- 左侧 -->

    <el-aside width="200px">
      <div class="uerphoto">
        <el-avatar
          src="https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png"
        ></el-avatar>
        <p>外卖商家系统</p>
      </div>

      <el-menu
        @select="selectnav"
        :default-active="actives"
        background-color="#455A64"
        text-color="#fff"
        active-text-color="#ffd103"
        unique-opened
        router
      >
        <div v-for="obj in sidebar" :key="obj.index">
          <!-- 可展开的菜单儿子 -->
          <el-submenu v-if="obj.children" :index="obj.index">
            <template slot="title">
              <i :class="obj.i"></i>
              <span>{{ obj.text }}</span>
            </template>

            <el-menu-item
              v-for="child in obj.children"
              :key="child.index"
              :index="child.index"
              >{{ child.text }}</el-menu-item
            >
          </el-submenu>
          <!-- 无法展开直接点击的菜单儿子 -->
          <el-menu-item v-else :index="obj.index">
            <i :class="obj.i"></i>
            <span slot="title">{{ obj.text }}</span>
          </el-menu-item>
        </div>
      </el-menu>
    </el-aside>

    <!-- 右侧 -->
    <el-container>
      <!-- 右-头 -->
      <el-header>
        <div class="header">
          <p style="display: flex; align-items: center">
            <el-breadcrumb separator-class="el-icon-arrow-right">
              <el-breadcrumb-item v-for="e in navlist" :key="e">{{
                e
              }}</el-breadcrumb-item>
            </el-breadcrumb>
          </p>

          <div style="display: flex">
            <p class="accountName">欢迎您，{{ us }}</p>
            <router-link to="/index/Uersphonto"
              ><el-avatar :src="url"></el-avatar
            ></router-link>
          </div>
        </div>
      </el-header>
      <!-- 右-身 -->
      <el-main>
        <router-view></router-view>
      </el-main>
    </el-container>
  </el-container>
</template>

   


<script>
import { bus } from "@/utils/utils";
import { checktoken, accountinfo } from "../apis/user";
export default {
  created() {
    // 判断是什么用户
    // console.log(JSON.parse(localStorage.ls));
    if (localStorage.role == "normal") {
      this.sidebar.splice(4);
    }
    //跨模块通信
    bus.$on("photo", (img) => {
      this.url = img;
    });
    // 回显头像
    this.actives = location.hash.replace("#", "");
    this.selectnav(this.actives);
    checktoken({ token: localStorage.token }).then((res) => {
      if (res.data.code == 0) {
        accountinfo({ id: localStorage.uses }).then((res) => {
          console.log(res.data.accountInfo.account);
          this.us = res.data.accountInfo.account;
          this.url = res.data.accountInfo.imgUrl;
        });
      }
    });
  },
  data() {
    return {
      navlist: [],
      us: "",
      url: "",
      actives: "/index",
      sidebar: [
        {
          index: "/index",
          i: "el-icon-house",
          text: "后台首页",
          bareks: ["首页"],
        },
        {
          index: "/index/Order",
          i: "el-icon-wallet",
          text: "订单管理",
          bareks: ["订单管理"],
        },
        {
          index: "3",
          i: "el-icon-shopping-bag-1",
          text: "商品管理",
          children: [
            {
              index: "/index/Productlist",
              text: "商品列表",
              bareks: ["商品管理", "商品列表"],
            },
            {
              index: "/index/Productaddi",
              text: "商品添加",
              bareks: ["商品管理", "商品添加"],
            },
            {
              index: "/index/Productf",
              text: "商品分类",
              bareks: ["商品管理", "商品分类"],
            },
          ],
        },
        {
          index: "/index/Shop",
          i: "el-icon-suitcase",
          text: "店铺管理",
          bareks: ["店铺管理"],
        },
        {
          index: "5",
          i: "el-icon-user-solid",
          text: "账号管理",
          children: [
            {
              index: "/index/Aaccount",
              text: "账号列表",
              bareks: ["账号管理", "账号列表"],
            },
            {
              index: "/index/Addaccount",
              text: "添加账号",
              bareks: ["账号管理", "添加账号"],
            },
            {
              index: "/index/Amendpsa",
              text: "修改密码",
              bareks: ["账号管理", "修改密码"],
            },
          ],
        },
        {
          index: "6",
          i: "el-icon-pie-chart",
          text: "商品统计",
          children: [
            {
              index: "/index/Statistics",
              text: "商品统计",
              bareks: ["商品统计"],
            },
            {
              index: "/index/IndentST",
              text: "订单统计",
              bareks: ["商品统计", "订单统计"],
            },
          ],
        },
      ],
    };
  },
  methods: {
    // 头部导航
    selectnav(index) {
      let bareks = [];
      for (const obj of this.sidebar) {
        if (obj.children) {
          for (const objs of obj.children) {
            if (objs.index == index) {
              bareks = objs.bareks;
            }
          }
        } else {
          if (index == obj.index) {
            bareks = obj.bareks;
          }
        }
      }

      console.log(bareks);
      this.navlist = bareks;
      console.log(index);
    },
  },
};
</script>

<style lang="less" scoped>
@import url("../assets/styles/zhut.less");
.uerphoto {
  justify-content: center;
  display: flex;
  height: 48px;
  line-height: 48px;
  p {
    color: rgb(240, 236, 236);
    margin-left: 6px;
    font-size: 16px;
  }
}

.el-menu {
  border: 0;
}
.el-container {
  width: 100%;
  height: 100%;
  background-color: #f0f2f5;
  .el-aside {
    text-align: center;
    background-color: #455a64;
  }

  .el-header {
    background-color: #fff;
  }
}
.header {
  height: 40px;
  line-height: 40px;
  padding: 10px 20px;
  justify-content: space-between;
  display: flex;
  background-color: #fff;
  P {
    font-size: 14px;

    color: #000;
    span {
      color: #606266;
    }
  }
  .accountName {
    margin-right: 15px;
  }
}
.el-card {
  background-color: #dbd9d9;
}
</style>